// 1.localstorage 对象是 h5 新增的 bom对象,用来 操作 浏览器的 硬盘用户数据 -----------
// 1.1 新增:localStorage.setItem(key,value)
// 1.2 获取:localStorage.getItem(key)
// 1.3 删除:localStorage.removeItem(key)
// 1.4 清空:localStorage.clear()
// 注意:key和value 必须为字符串

// 0.获取 两个文本框对象
let txtKeyObj:any = document.querySelector('#txtKey')
let txtValueObj:any = document.querySelector('#txtValue')
let btnAdd1:any = document.querySelector('#btnAdd')
let btnRead:any = document.querySelector('#btnGet')
let btnDel:any = document.querySelector('#btnRemove')
let btnClear:any = document.querySelector('#btnClear')
let btnAddobj:any = document.querySelector('#btnAddObj')
let btnGetObj: any = document.querySelector('#btnGetObj')

// 1. 保存数据
btnAdd1.onclick = function () {
  // 获取 两个文本框 内容
  let strKey = txtKeyObj.value
  let strValue = txtValueObj.value
  localStorage.setItem(strKey, strValue)
  console.log('保存成功~~~');
  
}
// 2.取数据
btnRead.onclick = function () {
  let strKey = txtKeyObj.value;
  // 从 本地数据中 根据key 取出 value 值
  let strValue:string | null = localStorage.getItem(strKey)
  console.log('你取出的数据位:' + strValue);
}

// 3.删除数据
btnDel.onclick = function () {
  let strKey = txtKeyObj.value;
  // 从本地数据中 根据 key 删除 数据
  localStorage.removeItem(strKey)
  console.log('您删除的数据为'+strKey);
  
}

//4.清空数据
btnClear.onclick = function () {
  // 从本地数据中 清空所有 数据
  localStorage.clear();
}

// 5.保存对象
btnAddobj.onclick = function () {
  let dog: Object = {
    name: '花花',
    age: 2,
    gender: false,
  }

  // 先将 对象 转成 JSON字符串,然后再保存
  let strJson: string = JSON.stringify(dog);
  // 保存 json字符串 到 本地
  localStorage.setItem('myDog', strJson)
  console.log('保存对象成功了');
  
}

// 6.取对象
btnGetObj.onclick = function () {
  //1.取出 json字符串
  let strjson: string | null = localStorage.getItem('myDog');
  //2.将 json字符串 转成 对象
  // let obj = JSON.parse(strjson as string)
  let obj = JSON.parse(<string>strjson)

  console.log(obj);
  
}

